<template>
  <div class="matchDetail">
    <div class="detail-title">{{ activeDetail.title }}</div>
    <div class="content-infos">
      <div class="detail-info">
        <van-icon name="underway-o" size="0.36rem"></van-icon>
        <span style="margin-left:0.3rem;">比赛时间:{{ activeDetail.time_st | dateFrom }}至{{ activeDetail.time_ed |
      dateFrom }}</span>
      </div>
      <div class="detail-content-html" v-html="activeDetail.active_design_phone"></div>
    </div>
    <div style="height: 1.5rem;"></div>
    <div class="footer-group" v-if="userRole != 2 && activeDetail.status == 1">
      <div class="user-ready">
        <van-checkbox v-model="checkStatus"></van-checkbox>
        <span style="margin-left:0.1rem;" @click="showxy=true">请阅读并同意<span class="user-xy">《网络信息保证书》</span></span>
      </div>
      <div class="button" @click="shureMethod(1)">立即报名</div>
    </div>
    <div class="footer-group" v-if="userRole == 2 && activeDetail.status == 1">
      <div class="user-ready">
        <van-checkbox v-model="checkStatus"></van-checkbox>
        <span style="margin-left:0.1rem;" @click="showxy=true">请阅读并同意<span class="user-xy">《网络信息保证书》</span></span>
      </div>
      <div class="button" @click="shureMethod(1)" v-if="signup == 0">立即报名</div>
      <div class="button" @click="shureMethod(4)" v-if="signup == 1 && is_examine == 1">查看报名</div>
      <div class="button1" v-if="signup == 1 && is_examine == 0">报名审核中</div>
    </div>
    <van-popup v-model="show" closeable position="bottom" :style="{ height: '65%' }">
      <set-user-info :init-show="show" :active-id="id" :callback="signupMethod" />
    </van-popup>
    <van-popup v-model="showxy" :style="{ height: '100%',width:'100%' }">
      <div style="height: 100vh;background-color: #fff;padding-bottom:1rem;">
        <iframe src="./guarantee.html" frameborder="0" style="height: 100%;width: 100%;"></iframe>
        <div class="popup-close-group">
          <div class="popup-close-button" @click="onReady">我已阅读并同意</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { getdate, getUserStatus, getUserRole } from "@/utils/utils";
import setUserInfo from "@/view/common/setUserInfo.vue";
import { Icon, Toast, Popup, ImagePreview, Checkbox } from 'vant';
export default {
  name: "match",
  components: {
    setUserInfo,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Checkbox.name]: Checkbox,
    [ImagePreview.Component.name]: ImagePreview.Component
  },
  data() {
    return {
      userRole: getUserRole(),
      activeDetail: {},
      id: '',
      signupId: '',
      show: false,
      show1: false,
      signup: false,
      checkStatus: false,
      showxy: false,
      is_examine: 0
    };
  },
  filters: {
    dateFrom(e) {
      if (!e) return '';
      return getdate(e);
    }
  },
  mounted() {
    console.log('userRole', this.userRole);
    this.id = this.$route.query.id;
    this.initAjaxMethod();
  },
  methods: {
    shureMethod(flag) {
      if (getUserStatus() == 1) {
        if (flag == 1) {
          if (!this.checkStatus) {
            return this.$notify({ type: 'warning', message: '请阅读并同意用户协议' });
          }
          this.show = true;
          return;
        }
        if (flag == 2 || flag == 3) {
          this.$router.push({ path: '/matchSubmit', query: { activeId: this.id, signupId: this.signupId, type: flag == 2 ? 1 : 2 } });
          return;
        }
        if (flag == 4) {
          this.$router.push('/signUp');
          return;
        }

      } else {
        this.$dialog.confirm({
          title: '提示',
          message: '您还未登录，是否前往登录',
        }).then(() => {
          sessionStorage.setItem('YF_LOGIN_HREF', window.location.href);
          this.$router.push({ path: '/login' });
        }).catch(() => { });
      }
    },
    onReady() {
      this.checkStatus = true;
      this.showxy = false;
    },
    //列表加载
    initAjaxMethod() {
      Toast.loading({ message: "加载中...", forbidClick: true });
      this.$http
        .post(this.$API.GET_ACTIVE_DETAIL, {
          id: this.id
        })
        .then((res) => {
          Toast.clear();
          if (res.code == 1) {
            this.activeDetail = res.data ? res.data : {};
            this.signup = res.signup ? (res.signup.status == 1 ? 2 : 1) : 0;
            this.is_examine = res.signup ? res.signup.is_examine : 0;
            this.signupId = res.signup && res.signup.id ? res.signup.id : '';
            this.setImgAddClick();
          }
        });
    },
    setImgAddClick() {
      setTimeout(() => {
        const container = document.querySelector('.detail-content-html');
        const imgs = container.querySelectorAll('img');
        var imgArr = [];
        for (let i = 0; i < imgs.length; i++) {
          var img = imgs[i];
          imgArr.push(img.src);
          img.addEventListener("click", () => {
            ImagePreview({
              images: imgArr,
              closeable: true,
              startPosition: i
            });
          });
        }
      }, 500);
    },
    signupMethod(signUps) {
      this.show = false;
      Toast.loading({ message: "加载中...", forbidClick: true });
      this.$http
        .post(this.$API.USER_SIGNUP, {
          active_id: this.id,
          entry_id: signUps.entry_id,
          guardian_id: signUps.guardian_id
        })
        .then((res) => {
          Toast.clear();
          this.initAjaxMethod();
          if (res.code == 1) {
            // this.$notify({ type: 'success', message: '报名成功' });
            // setTimeout(() => {
            //   if(this.userRole == 1){
            //     this.$router.push({ path: '/matchSubmit', query: { activeId: this.id, signupId: res.data, type: 1 } });
            //   }else if(this.userRole == 2){
            //     this.$router.push('/signUp');
            //   }
            // }, 1500);
            this.$dialog.confirm({
              title: '提示',
              message: '报名成功，请等待管理员审核！',
            }).then(() => { }).catch(() => { });
          } else {
            this.$notify({ type: 'warning', message: res.msg });
          }
        });
    }
  },
};
</script>
<style lang="less">
.matchDetail {
  padding: 0 0.3rem;
  position: relative;

  .detail-title {
    padding: 0.3rem 0;
    font-size: 0.32rem;
    color: #333;
    text-align: center;
    font-weight: bold;
  }

  .detail-info {
    display: flex;
    align-content: center;

    span {
      font-size: 0.28rem;
      color: #333;
      line-height: 0.3rem;
    }
  }

  .detail-content-html {
    font-size: 0.28rem;
    color: #333;
    padding: 0.3rem 0;

    img {
      width: 100% !important;
      height: auto;
    }
  }

  .footer-group {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 0.3rem;
    padding: 0.1rem;

    .button {
      height: 0.9rem;
      line-height: 0.9rem;
      text-align: center;
      font-size: 0.3rem;
      color: #fff;
      border-radius: 0.9rem;
      background: #409eff;
    }

    .button1 {
      height: 0.9rem;
      line-height: 0.9rem;
      text-align: center;
      font-size: 0.3rem;
      color: #333;
      border-radius: 0.9rem;
      background: #eee;
    }
  }
  .user-ready {
    display: flex;
    padding: 0.1rem 0.3rem;
    font-size: 0.3rem;
    color: #888;
    .user-xy {
      color: #45a0ff;
    }
  }
  .popup-close-group {
    padding: 0.1rem 24%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .popup-close-button {
    height: 0.7rem;
    background: #222fef;
    color: #fff;
    line-height: 0.7rem;
    border-radius: 0.35rem;
    text-align: center;
    font-size: 0.28rem;
  }
}
</style>